import React from 'react'
import PropTypes from 'prop-types'
import { Layout, Row, Col, Icon, Badge, Menu, Dropdown, Avatar, Popover,Breadcrumb,Popconfirm } from 'antd'
import { Link,withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { getAllMenu, updateNavPath } from '../../actions/menu'
import { jsonToTreeJson,findMenuByUrl} from "../../utils";
import { inject, observer } from 'mobx-react';
import store from 'store'
import {baseConfig} from '../../utils/constants'
import './index.less'

const { Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

export default class commonHeader extends React.Component {
  constructor(props) {
    super(props)
  }

  state = {
    menus:[]
  }

  handleLogOut = () => {
    const {logout} = this.props
    logout().payload.promise.then(() => {
      this.props.history.replace('/login');
    });
  }

  handleClick = (item) => {
    this.setState({
      current: item.key,
    });
    alert('开始修改值!');
    this.props.store.menuState.setMenuMainInx('213213');
    //this.props.refreshParent();
    // 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值
    // this.props.callbackParent(2);
  }

  componentWillMount() {
    this.props.store.menuState.getUserMenus().then((data) => {
      this.setState({
        menus:data
      });
   });
  }

  componentWillReceiveProps(nextProps) {
    /* Array.isArray(nextProps.items) && nextProps.items.map((item, i) => {
      if(i == 0){
        this.handleClick({
          key: 'bar_menu'+item.id,
          keyPath: ['bar_menu'+item.id],
          noJump:true
        })
      }
    }); */
  }

  render () {
    let {location} = this.props
    let items = this.state.menus;
    
    let user = store.get(baseConfig.store.USER_STATE)
    
    let pathname = location.pathname
    let selectMenu = findMenuByUrl(items,pathname)
    let treeMenus = jsonToTreeJson(items,'1')

    if(items.length<=0){
      return (<Header style={{ background: '#fff', padding: 0 }}></Header>);
    }
    let current;
    if(selectMenu){
      current = 'bar_menu' + selectMenu.parent.parent.id;
    }
    
    // 菜单单位解析器
    const _menuProcess = (nodes, pkey) => {
      return Array.isArray(nodes) && nodes.map((item, i) => {
        return (
          <Menu.Item key={'bar_menu'+item.id}>
            <Icon type={item.icon} />{item.name}
          </Menu.Item>
        )
      });
    }

    const menu = _menuProcess(treeMenus);

    return (
      <Header style={{ background: '#fff', padding: 0 }}>
        <Row type="flex" justify="start" align="middle">
          <Col style={{width:'230px'}}>
            <a href="/#/home" className="ant-logo"></a>
          </Col>
          <Col style={{width:'auto',position:'absolute',left:'230px',right:'280px'}}>
            <Menu
              onClick={this.handleClick}
              selectedKeys={[(this.state!=null && this.state.current?this.state.current:current)]}
              mode="horizontal"
            >
              {menu}
            </Menu>
          </Col>
          <Col style={{height:48 ,borderBottom:'1px solid #e9e9e9',width:'auto',position:'absolute',right:'20px'}}>
            <Breadcrumb style={{height:48,lineHeight:'48px'}}>
              <Breadcrumb.Item href="/#/home">
                <Icon type="home" />
              </Breadcrumb.Item>
              <Breadcrumb.Item href="javascript:void(0)">
                <Icon type="user" />
                <span>帐号:{user?user.loginName:'xxx'}</span>　
                <Icon type="team" />
                <span>所属机构:{user?user.officeName:'xxx'}</span>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                称呼:{user?user.name:'xxx'}
              </Breadcrumb.Item>
              <Breadcrumb.Item href="javascript:void(0)">
                <Popconfirm title="您是否确认要注销当前账户？" onConfirm={this.handleLogOut} okText="是" cancelText="否">
                  <Icon type="logout"/>注销
                </Popconfirm>
              </Breadcrumb.Item>
            </Breadcrumb>
          </Col>
        </Row>
      </Header>
    )
  }
}
